<template>
    <panel class="content" title="今日话题" sub="更多">
        <div class="tabs">
            <ul>
                <li @click="show=index" :class="{active:show===index }" v-for="(item,index) in items" :key="index">
                    {{ item.title}}
                </li>
            </ul>
        </div>
        <div class="row">
            <ul>
                <li>关于E社区信息发布规则的说明</li>
                <li>关于氢能网供应商会员发布内容中涉</li>
                <li>氢能源网微信小程序重磅上线，助您玩</li>
                <li>关于供应商用户实名认证通知</li>
                <li>氢能源网商务中心升级的公告</li>
                <li>关于E社区信息发布规则的说明</li>
            </ul>
        </div>
    </panel>
</template>

<script>
    import Panel from "../../../core/Panel";

    export default {
        components: {Panel},
        data() {
            return {
                activeName: "",
                items: [{title: "全部"}, {title: "技术"}, {title: "专利"}, {title: "项目"}],
                show: 0
            }
        }
    }
</script>

<style scoped lang="scss">
    .content {
        height: 270px;
        .tabs {
            margin-top: 13px;

            ul {
                display: flex;
                justify-content: space-between;
                padding: 0 6px;

                > li {
                    text-align: center;
                    width: 75px;
                    height: 26px;
                    line-height: 26px;
                    color: #000;
                    border-bottom: 1px solid #e5e5e5;
                    cursor: pointer;
                    @include ellipsis

                    /*&:nth-child(1) {*/
                    /*    border: 1px solid #19b955;*/
                    /*    border-radius: 5px 5px 0 0;*/
                    /*    border-bottom: 0;*/
                    /*}*/
                }
            }

        }

        .row {
            padding: 10px;

            ul {
                list-style: disc !important;

                > li {
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    color: #000;
                    position: relative;
                    @include ellipsis;
                    padding-left: 20px;
                    cursor: pointer;

                    &:before {
                        content: ' ';
                        position: absolute;
                        width: 4px;
                        height: 4px;
                        background: #666;
                        border-radius: 2px;
                        top: 12px;
                        left: 2px;
                    }
                }
            }
        }

        .active {
            border: 1px solid #19b955;
            border-radius: 5px 5px 0 0;
            border-bottom: 1px solid #fff !important;
        }
    }
</style>
